<template>
    <div class="what-wedo">
        <div class="what-wedo-wrap">
            <el-row :gutter="24">
                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                    <div class="what-wedo-item red-class">
                        <div class="what-wedo-item-title title-xl">~$1B</div>
                        <div class="what-wedo-item-text">Annual R&D & product investment spend in 2021</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                    <div class="what-wedo-item grey-class">
                        <div class="what-wedo-item-title title-xl">4M+</div>
                        <div class="what-wedo-item-text">Installed base equipment</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                    <div class="what-wedo-item green-class">
                        <div class="what-wedo-item-title title-xl">1B+</div>
                        <div class="what-wedo-item-text">Patients served annually</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
                    <div class="what-wedo-item blue-class">
                        <div class="what-wedo-item-title title-xl">200+</div>
                        <div class="what-wedo-item-text">Imaging software applications</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.what-wedo {
    background-color: #ffffff;
    padding-top: 48px;
    padding-bottom: 48px;
}

.what-wedo-wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px;
    max-width: 1280px;
}

.what-wedo-item {
    margin-top: 24px;
    min-height: 240px;
}

.what-wedo-item-title {
    font-weight: 300;
    color: #222222;
    text-transform: uppercase;
}

.what-wedo-item-text {
    letter-spacing: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    margin-top: 16px;
    padding-bottom: 40px;
}

@keyframes ProgressAnimation {
    0% {
        background-size: 0 4px;
    }

    100% {
        background-size: 100% 4px;
    }
}

.red-class {
    background: linear-gradient(#f37f63, #f37f63) 0 100% no-repeat;
    background-size: 100% 4px;
    animation: ProgressAnimation .6s;
}

.grey-class {
    background: linear-gradient(#5b5b67, #5b5b67) 0 100% no-repeat;
    background-size: 100% 4px;
    animation: ProgressAnimation .6s;
}

.green-class {
    background: linear-gradient(#19bb7c, #19bb7c) 0 100% no-repeat;
    background-size: 100% 4px;
    animation: ProgressAnimation .6s;
}

.blue-class {
    background: linear-gradient(#45b2c5, #45b2c5) 0 100% no-repeat;
    background-size: 100% 4px;
    animation: ProgressAnimation .6s;
}

</style>